<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		1. 安装 npm i vant@latest-v2 -S
		2. 使用
		2.1 全局导入  main.js中
		import Vant from 'vant';
		import 'vant/lib/index.css';
		
		Vue.use(Vant);
		
		组件内置直接使用 vant组件
		<van-button type="primary">主要按钮</van-button>
		<van-button type="info">信息按钮</van-button>
		<van-button type="default">默认按钮</van-button>
		
		2.2 按需导入
		1. 先安装插件 npm i babel-plugin-import -D
		
		2. 配置信息
		要么 在.babelrc 中添加配置、要么在babel.config.js 中配置
		module.exports = {
		  presets: [
		    '@vue/cli-plugin-babel/preset'
		  ],
		  plugins: [
		    ['import', {
		      libraryName: 'vant',
		      libraryDirectory: 'es',
		      style: true
		    }, 'vant']
		  ]
		}
		
		*****重新启动
		
		3. 按需使用  main.js中
		import { Button,Icon} from 'vant';
		Vue.use(Button);
		Vue.use(Icon);
		
		组件内置直接使用 vant组件
		<van-icon name="chat-o" /><br>
		<van-button type="primary">主要按钮</van-button>
		<van-button type="info">信息按钮</van-button>
		<van-button type="default">默认按钮</van-button>
		
		
		进阶
		1. lib-flexible  给根标签设置rem基准值
		   npm i -S amfe-flexible
		   
		  1.1 public 的index.html 引入（没用）
		  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
		  <script src="./node_modules/amfe-flexible/index.js"></script>
		  
		  1.2 main.js中导入(可以用)
		  import 'amfe-flexible/index.min.js'
		   
		2. postcss-pxtorem  组件单位直接写px,会自动转换为rem
		   npm install postcss postcss-pxtorem --save-dev
		   
		   配置  创建postcss.config.js文件, 填写内容，重新启动（报错）
		   
		   // postcss.config.js
		   module.exports = {
		     plugins: {
		       'postcss-pxtorem': {
		         rootValue: 37.5,
		         propList: ['*'],
		       },
		     },
		   };
		  
		  
		  postcss-pxtorem错误： 百度一下，发现版本过高，npm官网上搜索，查看版本，
		  最高 6.0.0--》5.1.1 降版本
		  
		  npm install postcss-pxtorem@5.1.1 --save-dev（不用删除，直接降）
	</body>
</html>
